<!--  -->
<template>
  <div class="workbench">
    <div class="gement"></div>
    <div class="handle">
      <div class="handleLeft"></div>
      <div class="handleRight"></div>
    </div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    mainList() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["成交额", "访客", "访问量"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "2021-03-02",
              "2021-03-06",
              "2021-03-10",
              "2021-03-14",
              "2021-03-18",
              "2021-03-22",
              "2021-03-26",
              "2021-03-30",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "成交额",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
          },
          {
            name: "访客",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
            ],
          },
          {
            name: "访问量",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.mainList();
  },
};
</script>
<style lang="scss" scoped>
.workbench {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .gement {
    width: 100%;
    height: 200px;
    background: #fff;
    border-radius: 5px;
  }
  .handle {
    width: 100%;
    height: 200px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .handleLeft {
      width: 49%;
      height: 100%;
      background: #fff;
    }
    .handleRight {
      width: 49%;
      height: 100%;
      background: #fff;
    }
  }
  #main {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    background: #fff;
  }
}
</style>
